<template>
  <div>
    <h1>选择登录方式</h1>
    <el-radio-group v-model="loginRequest.loginType">
      <el-radio value="PhoneCode" size="large">手机+验证码</el-radio>
      <el-radio value="EmailCode" size="large">邮箱+验证码</el-radio>
      <el-radio value="PhonePassword" size="large">手机+密码</el-radio>
      <el-radio value="EmailPassword" size="large">邮箱+密码</el-radio>
    </el-radio-group>
  </div>

  <div style="width: 240px" >
    <el-input v-if="loginRequest.loginType ==='PhoneCode' || loginRequest.loginType ==='PhonePassword'" v-model="loginRequest.phone" style="width: 240px; height: 30px" placeholder="电话" />
    <el-input v-if="loginRequest.loginType ==='EmailCode' || loginRequest.loginType ==='EmailPassword'" v-model="loginRequest.email" style="width: 240px; height: 30px" placeholder="邮箱" />
    <el-input v-if="loginRequest.loginType ==='EmailPassword' || loginRequest.loginType ==='PhonePassword'" v-model="loginRequest.password" style="width: 240px; height: 30px" placeholder="密码" />
    <el-input v-if="loginRequest.loginType ==='EmailCode' || loginRequest.loginType ==='PhoneCode'" v-model="loginRequest.code" style="width: 240px; height: 30px" placeholder="验证码" />
    <el-button @click="getVerificationCode" v-if="loginRequest.loginType ==='EmailCode' || loginRequest.loginType ==='PhoneCode'" type="primary">获取验证码</el-button>
    <el-button @click="doLogin" type="primary">登录</el-button>
  </div>


</template>

<script lang="ts" setup>
import {reactive} from 'vue'
import axios from 'axios'
const loginRequest = reactive({
  loginType: "PhoneCode",
  phone:"",
  email:"",
  password:"",
  code:""
})

const doLogin = () => {
  axios
      .post('http://localhost:8080/login',loginRequest)
      .then(response => (console.log(response)))
      .catch(function (error) { // 请求失败处理
        console.log(error);
      });
};

const getVerificationCode = () => {
  console.log("请求验证码ing")
  const VerificationCodeRequest = {
    verifyType: "",
    acceptDetails: ""
  }

  if (loginRequest.loginType === "PhoneCode"){
    VerificationCodeRequest.acceptDetails = loginRequest.phone;
    VerificationCodeRequest.verifyType = "phone"
  }else if (loginRequest.loginType === "EmailCode"){
    VerificationCodeRequest.acceptDetails = loginRequest.email;
    VerificationCodeRequest.verifyType = "email";
  }else {
    return;
  }
  axios
      .post('http://localhost:8080/verificationCode',VerificationCodeRequest)
      .then(response => (console.log(response)))
      .catch(function (error) { // 请求失败处理
        console.log(error);
      });
};
</script>